<template>
  <q-page class="q-ma-sm">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" :error="$v.fields.ipAddress.$error" :warning="msg.ipAddress !== ''" v-model="fields.ipAddress"
                 :float-label="$v.fields.ipAddress.$error ? 'IP地址必填': msg.ipAddress === '' ? 'IP地址' : msg.ipAddress"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" v-model="fields.subnet" :warning="msg.subnet !== ''"
                 :float-label="msg.subnet === '' ? '子网掩码' : msg.subnet"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" v-model="fields.gateway" :warning="msg.gateway !== ''"
                 :float-label="msg.gateway === '' ? '网关' : msg.gateway"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" v-model="fields.belong" float-label="所属"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" v-model="fields.fuction" float-label="用途"/>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3">
        <q-input class="q-ma-sm" v-model="fields.isp" float-label="ISP"/>
      </div>
    </div>
    <q-layout-footer>
      <q-toolbar style="min-height:35px;">
        <q-toolbar-title></q-toolbar-title>
        <q-btn class="q-mr-sm" color="info" icon="done" @click.native="submit">提交</q-btn>
        <q-btn class="q-mr-sm" color="negative" icon="priority_high" @click.native="$store.dispatch('editIps/deleteData')">删除</q-btn>
        <q-btn class="q-mr-sm" color="secondary" icon="clear" @click.native="$store.dispatch('frame/jump', '/listips')">返回</q-btn>
      </q-toolbar>
    </q-layout-footer>
  </q-page>
</template>

<script>
import editIpsModule from '../../store/editIps'
import { required } from 'vuelidate/lib/validators'
import { QSpinnerGears } from 'quasar'
export default {
  preFetch ({ store, currentRoute }) {
    store.registerModule('editIps', editIpsModule)
    store.state.editIps.loading.show({spinner: QSpinnerGears})
    store.dispatch('editIps/loadData', currentRoute.params.ipsId)
  },
  name: 'EditIps',
  data: function () {
    return this.$store.state.editIps
  },
  validations: {
    fields: {
      ipAddress: {required}
    }
  },
  methods: {
    submit () {
      this.$v.fields.$touch()
      if (this.$v.fields.$error) {
        this.$q.notify('请修正页面错误！')
        return
      }
      this.$store.dispatch('editIps/save')
    }
  },
  beforeDestroy () {
    this.$store.commit('editIps/reset')
    this.$store.unregisterModule('editIps')
  }
}
</script>

<style>
</style>
